import { Redirect, Route } from 'react-router-dom'
import React, { lazy, Suspense } from 'react'
import { Spin } from 'antd'

// 0: 不做权限
// 10: 最高权限
type IAuth = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | undefined

type IRoutesConfig = {
  readonly path: string
  readonly key?: React.Key
  readonly exact?: boolean
  readonly strict?: boolean
  readonly auth?: IAuth // 0: 无权限;
  readonly component: any
}

type IJudege = { path: string; index: number; key?: React.Key; component: React.ReactNode }

// 路由鉴权
const authJudge = (auth: IAuth, userAuth: IAuth[], judege: IJudege): React.ReactNode => {
  if (auth) {
    if (userAuth.includes(auth)) {
      // console.log('有权限', judege.path, auth, userAuth)
      return judege.component
    } else {
      // console.log('无权限', judege.path, auth, userAuth)
      return <Redirect key={judege.key || 'redirect' + judege.index} to={urlReflect.home} />
    }
  } else {
    // console.log('默认权限', judege.path, auth, userAuth)
    return judege.component
  }
}

/**
 * 懒加载
 * @param component 要渲染的组件
 * @returns 生成的结构
 */
const getLazy = (component: React.ReactNode) => (
  <Suspense
    fallback={
      <Spin spinning={true}>
        <div style={{ minHeight: '100vh' }} />
      </Spin>
    }
  >
    {component}
  </Suspense>
)

// 路由鉴权
/**
 * 路由鉴权
 * @param routes 路由配置项
 * @param userAuth 用户权限
 * @returns routes
 */
export const renderRoutes = (routes: IRoutesConfig[], userAuth: IAuth[] = [0]) => {
  const myRoutes = routes.map(({ path, key, auth, strict, exact, component: Component }, index) => {
    if (typeof Component === 'function') {
      return (
        <Route
          key={key || 'route' + index}
          path={path}
          strict={strict}
          exact={exact}
          render={(props) => authJudge(auth, userAuth, { path, index, key, component: <Component {...props} /> })}
        />
      )
    } else {
      return (
        <Route
          key={key || 'route' + index}
          path={path}
          exact={exact}
          strict={strict}
          render={(props) => authJudge(auth, userAuth, { path, index, key, component: getLazy(<Component {...props} />) })}
        />
      )
    }
  })
  return myRoutes
}

/**
 * 45666
 */
export const firstRouteUrlMap = { login: '/login', space: '/' }

export const urlReflect = {
  home: '/home',
  notFind: '/page404',
  componentIcon: '/component/icon',
  componentEditer: '/component/editer',
  pagesList: '/pages/list',
  pagesForm: '/pages/form',
  pagesDetails: '/pages/details',
  authorGuest: '/author/guest',
  authorAccount: '/author/account',
  authorVip: '/author/vip',
}

export const firstRouter: IRoutesConfig[] = [
  { path: firstRouteUrlMap.login, auth: 0, exact: true, component: lazy(() => import('@/pages/login')) },
  { path: firstRouteUrlMap.space, auth: 0, exact: false, component: lazy(() => import('@/pages/layout')) },
]

export const routeList: IRoutesConfig[] = [
  { path: urlReflect.home, auth: 0, exact: true, component: lazy(() => import('@/pages/home')) },
  { path: urlReflect.notFind, auth: 0, exact: true, component: lazy(() => import('@/pages/page404')) },
  { path: urlReflect.componentIcon, auth: 1, exact: true, component: lazy(() => import('@/pages/component/icon')) },
  { path: urlReflect.componentEditer, auth: 1, exact: true, component: lazy(() => import('@/pages/component/editer')) },
  { path: urlReflect.pagesList, auth: 2, exact: true, component: lazy(() => import('@/pages/pages/list')) },
  { path: urlReflect.pagesForm, auth: 2, exact: true, component: lazy(() => import('@/pages/pages/form')) },
  { path: urlReflect.pagesDetails, auth: 2, exact: true, component: lazy(() => import('@/pages/pages/details')) },
  { path: urlReflect.authorGuest, auth: 3, exact: true, component: lazy(() => import('@/pages/author/guest')) },
  { path: urlReflect.authorAccount, auth: 3, exact: true, component: lazy(() => import('@/pages/author/account')) },
  { path: urlReflect.authorVip, auth: 3, exact: true, component: lazy(() => import('@/pages/author/vip')) },
]
